<template>
  <div>
    <div class="all-data">
      <el-row style="height:100%"
              :gutter="10">
        <el-col :span="4"
                style="height:100%">
          <div class="device">
            <div class="content">
              <div class="title">设备总数</div>
              <div class="num-all">
                <div class="num">0</div>
                <div class="num">5</div>
              </div>
              <div class="unit">
                单位：台
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4"
                style="height:100%">
          <div class="warning">
            <div class="content">
              <div class="title">异常设备</div>
              <div class="num-all">
                <div class="num">0</div>
                <div class="num">1</div>
              </div>
              <div class="unit">
                单位：台
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9"
                style="height:100%">
          <div class="pms-all">
            <div class="content">
              <div class="title">总能耗</div>
              <div class="num-all">
                <div class="num">1</div>
                <div class="num">2</div>
                <div class="num">3</div>
                <div class="num">4</div>
                <div style="line-height:82px">.</div>
                <div class="num">5</div>
              </div>
              <div class="unit">
                单位：kWh
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7"
                style="height:100%">
          <div class="pms-today">
            <div class="title">
              当天能耗值
            </div>
            <gauge-chart chartId="pms"></gauge-chart>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import gaugeChart from "./charts/gaugeChart"
import { getAllDeviceDataRealtime } from "@/api/platformManage";
export default {
  name: "overView",
  components: {
    gaugeChart
  },
  props: {
    deviceId: {
      type: String,
      default: ""
    },
    deviceName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
    };
  },
  filters: {
  },
  watch: {
    // deviceId(newVal) {
    //   this.getAllDeviceDataRealtimeFun(newVal);
    // }
  },
  mounted() {
    // this.getAllDeviceDataRealtimeFun(this.deviceId);
  },
  methods: {
    // getAllDeviceDataRealtimeFun(deviceId) {
    // }
  }
};
</script>
<style lang="scss" scoped>
.all-data {
  height: 215px;
  .device {
    width: 100%;
    height: 100%;
    background-image: url("../../../../assets/PMSPlatformDetail/deviceBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    // background-size: 100% 100%;
  }
  .warning {
    width: 100%;
    height: 100%;
    background-image: url("../../../../assets/PMSPlatformDetail/warningDeviceBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    // background-size: 100% 100%;
  }
  .pms-all {
    width: 100%;
    height: 100%;
    background-image: url("../../../../assets/PMSPlatformDetail/pmsBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    // background-size: 100% 100%;
  }
  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    .title {
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      line-height: 80px;
      color: #ffffff;
    }
    .num-all {
      height: 68px;
      width: 100%;
      font-weight: 700;
      font-size: 40px;
      text-align: center;
      line-height: 68px;
      color: #ffffff;
      display: flex;
      justify-content: center;

      .num {
        height: 100%;
        width: 42px;
        margin: 5px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("../../../../assets/PMSPlatformDetail/numBg.png");
      }
    }
    .unit {
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 80px;

      color: #ffffff;
      opacity: 0.8;
    }
  }
  .pms-today {
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    color: #000000;
    background: #ffffff;
    border-radius: 4px;
    .title {
      padding-top: 10px;
    }
  }
}
</style>
